{extend name="./tpl/default/mobile/public/layout2.html" /}
{block name="header"}
<link rel="stylesheet" href="/public/home/mobile/css/member/set.css">
{/block}
{block name="head"}
<div class="am-g" style="font-size: 20px;height: 45px;line-height: 45px;border-bottom: 1px solid #e0e0e0;">
    <div class="am-u-sm-5">
        <a href="{:url('/home/User/set')}"><span class="icon iconfont icon-xiangzuojiantou"></span></a>
    </div>
    <div class="am-u-sm-6" style="margin-right: 30px; padding-left:0;">
        账号安全
    </div>
</div>
{/block}
{block name="body"}
<div id="account">
    <ul class="am-list">
        <li>
            <div class="am-g">
                <div class="am-u-sm-8" style="padding-left: 32px;">
                    修改密码
                </div>
                <div class="am-u-sm-4" onclick="changePassword()">点击修改
                    <span class="icon iconfont icon-xiangyoujiantou"></span>
                </div>
            </div>
        </li>
        <li>
            <div class="am-g">
                <div class="am-u-sm-8" style="padding-left: 32px;">
                    绑定手机（{$userInfo.username}）
                </div>
                <div class="am-u-sm-4" onclick="changePhone()">
                    <a>更换手机</a>
                    <span class="icon iconfont icon-xiangyoujiantou"></span>
                </div>
            </div>
        </li>
        <li>
            <div class="am-g">
                <div class="am-u-sm-8" style="padding-left: 32px;">
                    验证邮箱({$userInfo.email})
                </div>
                <div class="am-u-sm-4" onclick="bindEmail()">
                    <a>点击验证</a>
                    <span class="icon iconfont icon-xiangyoujiantou"></span>
                </div>
            </div>
        </li>
        <li>
            <div class="am-g">
                <div class="am-u-sm-8" style="padding-left: 32px;">
                    绑定微信
                </div>
                <a href="{:url('bindWechat')}">
                    <div class="am-u-sm-4">解除绑定
                        <span class="icon iconfont icon-xiangyoujiantou"></span>
                    </div>
                </a>
            </div>
        </li>
    </ul>
    <div class="am-g" style="text-align: center">
        <div class="am-u-sm-12">
                 <a href="{:url('home/User/loginout')}" class="am-list-item-hd" ><button type="button" class="am-btn am-btn-danger  am-btn-lg" style="border-radius: 5px;">退出登录</button>
                            </a>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    function changePassword() {
        //询问框
        layer.open({
            content: '<form class="am-form" id="changepassword">' +
            '    <div class="am-form-group">\n' +
            '      <label >旧密码</label>\n' +
            '      <input type="password" class="" name="oldpassword" placeholder="输入旧密码">\n' +
            '    </div>' +
            '    <div class="am-form-group">\n' +
            '      <label >新密码</label>\n' +
            '      <input type="password" class="" name="newpassword" placeholder="输入新密码">\n' +
            '    </div>' +
            '    <div class="am-form-group">\n' +
            '      <label >重新输入新密码</label>\n' +
            '      <input type="password" class="" name="confirmpassword" placeholder="重新输入新密码">\n' +
            '    </div>' +
            '</form>'
            , btn: ['确定', '取消']
            , yes: function (index) {
                var data = $('#changepassword').serialize();
                $.post('{:url("password")}', data, function (data) {
                    layer.open({
                        content: data.msg
                        , skin: 'msg'
                        , time: 2 //2秒后自动关闭
                    });
                    if (data.code) {
                        layer.close(index);
                    }
                });
            }
        });
    }

    function changePhone() {
        //询问框
        layer.open({
            shadeClose: false,
            content: '<form class="am-form" id="changepassword">' +
            '    <div class="am-form-group">\n' +
            '      <label >输入手机号</label>\n' +
            '      <input type="text" class="" name="username" id="username" placeholder="输入手机号">\n' +
            '    </div>' +
            '    <div class="am-form-group">\n' +
            '      <label >验证码</label>\n' +
            '      <input type="text" class="" id="reg-vcode" placeholder="输入验证码">\n' +
            '    </div>' +
            '    <div class="am-form-group">\n' +
            '<img src="{:captcha_src()}" onclick="$(this).attr(\'src\',\'{:captcha_src()}?time=\'+new Date().getTime())" style="width: 32vw;">' +
            '<button type="button" class="am-btn am-btn-primary" id="sendSms1" onclick="sendSms()">获取手机验证码</button>' +
            '    </div>' +
            '    <div class="am-form-group">\n' +
            '      <label >输入手机验证码</label>\n' +
            '      <input type="text" class="" name="code" placeholder="输入手机验证码">\n' +
            '    </div>' +
            '</form>'
            , btn: ['确定', '取消']
            , yes: function (index) {
                var data = $('#changepassword').serialize();
                $.post('{:url("username")}', data, function (data) {
                    layer.open({
                        content: data.msg
                        , skin: 'msg'
                        , time: 2 //2秒后自动关闭
                    });
                    if (data.code) {
                        layer.close(index);
                    }
                });
            }
        });
    }

    function sendSms() {
        var to = $('#username').val();
        var vcode = $('#reg-vcode').val();
        $.post('/home/Public/sendSms', {to: to, vcode: vcode}, function (data) {
            var dom = $('#sendSms1');
            dom.text(data.msg);
            if (data.code) {
                dom.removeClass('am-btn-danger').addClass('am-btn-primary');
                dom.attr('disabled', 'disabled')
            } else {
                dom.removeClass('am-btn-primary').addClass('am-btn-danger')
            }
        })
    }

    function bindEmail() {
        //询问框
        layer.open({
            shadeClose: false,
            content: '<form class="am-form" id="changepassword">' +
            '    <div class="am-form-group">\n' +
            '      <label >输入邮箱</label>\n' +
            '      <input type="text" class="" name="email" id="username" placeholder="输入邮箱">\n' +
            '    </div>' +
            '    <div class="am-form-group">\n' +
            '      <label >验证码</label>\n' +
            '      <input type="text" class="" id="vcode" name="vcode" placeholder="输入验证码">\n' +
            '    </div>' +
            '    <div class="am-form-group">\n' +
            '<img src="{:captcha_src()}" onclick="$(this).attr(\'src\',\'{:captcha_src()}?time=\'+new Date().getTime())" style="width: 32vw;">' +
            '    </div>' +
            '</form>'
            , btn: ['确定', '取消']
            , yes: function (index) {
                var data = $('#changepassword').serialize();
                $.post('{:url("bindEmail")}', data, function (data) {
                    layer.open({
                        content: data.msg
                        , skin: 'msg'
                        , time: 2 //2秒后自动关闭
                    });
                    if (data.code) {
                        layer.close(index);
                    }
                });
            }
        });
    }
</script>
{/block}
